<template>
	<view :class="themeName">
		<!-- 搜索 -->
		<view class="bg-white">
			<view class="search-input flex p-20">
				<u-search class="flex-1" v-model="adskeyword" height="72" bg-color="#F4F4F4" :show-action="false"
					:placeholder="$zhTran('请输入收货人/电话/地址')" @search="apiAddressListsFun" @clear="apiAddressListsFun" />
				<view class="search-action p-10" @tap="apiAddressListsFun"> {{$zhTran('搜索')}} </view>
			</view>
		</view>
		<view class="address">
			<!-- 收货地址空状态 -->
			<view class="no-address" v-if="addressList.length == 0">
				<image src="/bundle2/static/images/empty/address.png"></image>
				<view class="sm muted">{{$zhTran('暂无添加地址，请添加~')}}</view>
			</view>

			<!-- 收货地址的列表数据 -->
			<view class="address-list" v-else>
				<view v-for="(item, index) in addressList" :key="item.id" class="bg-white m-t-20" :data-id="item.id"
					@tap="onSelect">
					<view class="user-address">
						<view class="md bold">
							{{ item.contact }}
							<text class="m-l-22">{{ item.mobile }}</text>
						</view>
						<view class="lighter sm m-t-10 line-1">
							{{ item.province || item.country }} {{ item.city }} {{ item.district }}
							{{ item.address }}
						</view>
					</view>

					<view class="operation flex row-between">
						<radio @click.stop="changeDefault(item.id)" style="transform: scale(0.8)" :color="themeColor"
							:value="item.id + ''" :checked="item.is_default == '1' ? true : false">
							<text class="xxl">{{$zhTran('设为默认')}}</text>
						</radio>
						<view class="flex">
							<view class="sm m-r-25" @click.stop="editAddress(item.id)">
								<image class="icon-md m-r-5" src="/bundle2/static/images/address_icon_edit.png"></image>
								{{$zhTran('编辑')}}
							</view>
							<view class="sm" @click.stop="showSurePop(item.id)">
								<image class="icon-md m-r-5" src="/bundle2/static/images/address_icon_del.png"></image>
								{{$zhTran('删除')}}
							</view>
						</view>
					</view>
				</view>
				<w-jishuzhichi />
			</view>

			<!-- 删除地址 -->
			<u-modal id="delete-dialog" v-model="delPupop" :showCancelButton="true" :confirm-text="$zhTran('狠心删除')"
				:confirm-color="themeColor" :show-title="false" @confirm="delAddressFun" @cancel="delPupop = false">
				<view class="tips-dialog">
					<!-- <image class="icon-md" src="/bundle2/static/images/icon_warning.png"></image> -->
					<view style="margin-top: 30rpx">{{$zhTran('确认删除该地址吗？')}}</view>
				</view>
			</u-modal>

			<!-- 页脚 -->
			<view class="footer flex row-between fixed bg-white">
				<!-- #ifdef H5 || MP-WEIXIN -->
				<view class="btn wx-btn flex row-center br60 m-r-20" @click="getWxAddressFun" v-if="isWeixin">
					<image class="icon-md m-r-10" :src="$getImageUri('resource/image/shopapi/default/icon_wechat.png')">
					</image>
					<text class="md" style="font-weight: 300">{{$zhTran('微信导入')}}</text>
				</view>
				<!-- #endif -->
				<view class="btn add-btn white md flex br60 row-center" :class="themeName" @click="addAddress">
					{{$zhTran('新增收货地址')}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// +----------------------------------------------------------------------
	// | LikeShop100%开源免费商用电商系统
	// +----------------------------------------------------------------------
	// | 欢迎阅读学习系统程序代码，建议反馈是我们前进的动力
	// | 开源版本可自由商用，可去除界面版权logo
	// | 商业版本务必购买商业授权，以免引起法律纠纷
	// | 禁止对系统程序代码以任何目的，任何形式的再发布
	// | Gitee下载：https://gitee.com/likeshop_gitee/likeshop
	// | 访问官网：https://www.likemarket.net
	// | 访问社区：https://home.likemarket.net
	// | 访问手册：http://doc.likemarket.net
	// | 微信公众号：好象科技
	// | 好象科技开发团队 版权所有 拥有最终解释权
	// +----------------------------------------------------------------------
	// | Author: LikeShopTeam
	// +----------------------------------------------------------------------
	import {
		apiAddressLists,
		apiAddressDel,
		apiAddressEditDefault
	} from "@/api/user";
	import wechath5 from "@/utils/wechath5";
	import {
		isWeixinClient
	} from "@/utils/tools";
	export default {
		data() {
			return {
				addressList: [], //地址数据列表
				delPupop: false, //删除弹窗flag
				currentId: 0, //当前需要删除的ID
				isWeixin: true, //是不是微信，如果是就显示微信导入地址按钮
				adskeyword: "",
			};
		},

		onLoad(options) {
			if (options) {
				if (options.type) {
					this.type = options.type;
				}
			}
			if (this.$Route.meta.atitle) {
				uni.setNavigationBarTitle({
					title: this.$zhTran(this.$Route.meta.atitle)
				})
			}
			//#ifdef H5
			this.isWeixin = isWeixinClient();
			//#endif
		},

		onShow: function() {
			this.apiAddressListsFun();
		},

		methods: {
			// 获取地址列表
			apiAddressListsFun() {
				apiAddressLists({
					keyword: this.adskeyword
				}).then((res) => {
					this.addressList = this.$zhTran(res);
					console.log(res);
				});
			},


			// 选择当前地址作为支付地址
			onSelect(e) {
				if (this.type) {
					let id = e.currentTarget.dataset.id;
					uni.$emit("changeAddress", id);
					uni.navigateBack();
				}
			},

			// 新增地址
			addAddress() {
				this.$Router.push("/bundle2/pages/address_edit/address_edit");
			},

			// 编辑地址
			editAddress(id) {
				this.$Router.push({
					path: "/bundle2/pages/address_edit/address_edit",
					query: {
						id: id,
					},
				});
			},

			changeDefault(id) {
				apiAddressEditDefault({
					id
				}).then((res) => {
					this.apiAddressListsFun();
				});
			},

			// 删除地址弹窗
			showSurePop(id) {
				this.delPupop = true;
				this.currentId = id;
			},

			// 删除地址
			delAddressFun() {
				apiAddressDel({
					id: this.currentId
				}).then((res) => {
					this.$toast({
						title: this.$zhTran("删除成功"),
					});
					this.delPupop = false;
					this.apiAddressListsFun();
				});
			},

			// 微信导入地址
			getWxAddressFun() {
				var vm = this
				// #ifdef H5
				wechath5.getWxAddress().then((res) => {
					uni.setStorageSync("wxAddress", JSON.stringify(res));
					setTimeout(() => {
						uni.navigateTo({
							url: `/bundle2/pages/address_edit/address_edit`,
						});
					}, 200);
				});
				// #endif
				// #ifdef MP-WEIXIN
				uni.authorize({
					scope: "scope.address",
					success(res) {
						uni.chooseAddress({
							success(res) {
								uni.setStorageSync("wxAddress", JSON.stringify(res));
								setTimeout(() => {
									uni.navigateTo({
										url: `/bundle2/pages/address_edit/address_edit`,
									});
								}, 200);
							},
							fail(res) {
								if (res.errMsg == "chooseAddress:cancel")
									return vm.$toast({
										title: vm.$zhTran("取消选择"),
									});
							},
						});
					},
					fail(res) {
						uni.showModal({
							title: this.$zhTran("您已拒绝导入微信地址权限"),
							content: this.$zhTran("是否进入权限管理，调整授权？"),
							success(res) {
								if (res.confirm) {
									uni.openSetting({
										success(res) {},
									});
								} else if (res.cancel) {
									return vm.$toast({
										title: vm.$zhTran("已取消！"),
									});
								}
							},
						});
					},
				});
				// #endif
			},
		},

		onUnload() {
			uni.$emit("changeAddress");
		},
	};
</script>
<style lang="scss">
	.icon-md {
		width: 36rpx;
		height: 36rpx;
		vertical-align: top;
	}

	.address {
		padding-bottom: calc(140rpx + env(safe-area-inset-bottom));

		.no-address {
			padding-top: 400rpx;
			text-align: center;

			image {
				width: 300rpx;
				height: 300rpx;
			}
		}

		.address-list {
			.user-address {
				border-bottom: 1rpx solid #e5e5e5;
				padding: 20rpx 30rpx 25rpx 30rpx;
			}

			.operation {
				height: 80rpx;
				padding: 0 30rpx 0 10rpx;
			}
		}

		.footer {
			left: 0;
			right: 0;
			bottom: 0;
			height: 118rpx;
			position: fixed;
			padding: 0 30rpx;
			box-sizing: content-box;
			padding-bottom: env(safe-area-inset-bottom);

			.icon-md {
				width: 34rpx;
				height: 34rpx;
				vertical-align: middle;
			}

			.btn {
				flex: 1;
				height: 80rpx;
			}

			.wx-btn {
				background: #f2f2f2;
			}

			.add-btn {
				@include background_color();
			}
		}
	}

	.tips-dialog {
		height: 230rpx;
		width: 100%;
		text-align: center;
	}
</style>